<template>
  <div>
    第一个数字： <input type="text" v-model.number="num1" /> 第二个数字：
    <input type="text" v-model.number="num2" />
    <p>{{ num3 }}</p>
    <hr />
    <input type="text" v-model.lazy="msg" />
    <p>{{ reverseMsg }}</p>
    <hr />
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <p>总和：{{ total }}</p>
    <p>{{ getTotal() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      msg: '',
      arr: [1, 2, 34, 5, 6],
    }
  },
  computed: {
    num3() {
      return this.num1 + this.num2
    },
    reverseMsg() {
      return this.msg.split('').reverse().join('')
    },
    total() {
      return this.arr.reduce((prev, item) => {
        return prev + item
      }, 0)
    },
  },
  method: {
    getTotal() {
      this.num1 + this.num2
    },
  },
}
</script>

<style></style>
